<template>


  <!-- form 查询表单 -->
    <el-form :model="shop" ref="formRef" label-width="auto" label-position="right" style="padding-bottom: 10px;">
        <el-row :gutter="20">
            <el-col :span="8">
                <el-form-item label="商家名" prop="name">
                    <el-input v-model="shop.shopname" placeholder="请输入商家名" clearable/>
                </el-form-item>
            </el-col>
            <el-col :span="8">
                <el-form-item label="商家电话" prop="author">
                    <el-input v-model="shop.phone" placeholder="请输入商家电话" clearable/>
                </el-form-item>
            </el-col>
            <el-col :span="4">
                <el-button type="primary" @click="doList">查询</el-button>
            </el-col>
        </el-row>
        <el-row :gutter="20">

        </el-row>
    </el-form>


    <div style="background: #cccccc">
        <el-scrollbar height="550px">
            <el-card v-for="item in tableData" style="margin-bottom: 20px;height: 200px">
                <el-row>
                    <el-col :span="6">
                        <div class="block text-center">
                            <el-carousel height="220px" motion-blur style="margin-top: -20px">
                                <el-carousel-item v-for="item in item.pictures">
                                    <img :src="'/api' + item" alt="菜品图片"
                                         height="200px"
                                    />
                                </el-carousel-item>
                            </el-carousel>
                        </div>
                    </el-col>
                    <el-col :span="1">
                    </el-col>

                    <el-col :span="17" @click="toshop(item)">
                        <h1 class="con">商家名称：{{item.shopname}}</h1>
                        <h1 class="con">联系电话：{{item.phone}}</h1>
                        <h1 class="con">地址：{{item.address}}</h1>
                        <h1 class="con">已售货：999+</h1>
                        <h1 class="con">评论：999+</h1>
                        <h1 class="con">评分：
                            <el-rate
                                    v-model="item.score"
                                    disabled
                                    show-score
                                    text-color="#ff9900"
                                    score-template="{value}"
                                    size="large"
                                    style="margin-top: -10px"
                            />
                        </h1>
                    </el-col><!--
                    <el-col :span="9" @click="toshop(item)">

                        <div class="dishes-list">
                            <el-card v-for="(dish, index) in " :style="{}" :key="index"  @click="toshop(item)" class="dish-card" :body-style="{ padding: '0px 0px 0px 40px' }">
                                <div class="dish-info" >
                                    <div class="photo">
                                        <img :src="'http://localhost:8081' + dish.picture" alt="菜品图片" class="dish-image" />
                                    </div>
                                    <div class="miaos" style="color: yellow">{{dish.name}}</div>
                                </div>
                                <div class="dish-control">
                                    <span class="price">¥{{dish.price}}</span>

                                </div>
                            </el-card>

                        </div>
                    </el-col>-->
                </el-row>
            </el-card>
        </el-scrollbar>



    </div>


  <!-- 进店下单 dialog-->
    <el-dialog v-model="PlaceOrder" title="商家美食" width="80%" top="2vh" destroy-on-close>
        <shop-xia-dan ref="jindian"
                      @closeDialog="PlaceOrder = false">
        </shop-xia-dan>
    </el-dialog>

</template>

<script setup lang="ts">

import {onMounted, ref,nextTick} from "vue";
import axios from "axios";
import router from "../../../router";
import ShopXiaDan from "./ShopXiaDan.vue";
import { ElNotification } from 'element-plus'
const shopId1=ref('');
const shop=ref({
    id: '',
    shopname: '',//店铺名称
    pwd: '',
    checked: '', //审核状态
    score: '',//评分
    phone: '',// 手机
    address: '',// 地址
    state: '',//状态
    picture: '',// 图片
    income: '',//收入
});



const tableData=ref([]);


onMounted(()=>{
    doList();
})
const doList=async ()=>{
    const {data} = await axios.get('/api/shop',{params:shop.value});
    tableData.value = data;


    nextTick(()=>{
        tableData.value.forEach(item=>{
            tupian(item);
        });

    })
};



// // 加载图片
const tupian = async(item)=>{
    const {data} = await axios.get('/api/dishes/shop',{params:item});
    const pictures=ref([]);

    // 构建轮播图图片：店铺主图 + 前三菜品图
    pictures.value.push(item.picture);
    pictures.value.push(data[0].picture)
    pictures.value.push(data[1].picture)
    item.score=item.score.substring(0, 4);
    item.pictures=pictures;
}

const open4 = () => {
    ElNotification({
        title: '该店已打烊',
        message: '商家缺钱就开店',
        type: 'error',
    })
}

const PlaceOrder = ref(false);
const jindian = ref(); // 组件引用
const toshop =async (obj)=>{
    if(obj.state==="0"){
        open4();
        return;
    }
    delete obj.pictures;
    localStorage.setItem("shop", JSON.stringify(obj));
    await router.push("/user/xd");
}

</script>

<style scoped>
.demonstration {
    color: var(--el-text-color-secondary);
}

.el-carousel__item h3 {
    color: #475669;
    opacity: 0.75;
    line-height: 180px;
    margin: 0;
    text-align: center;
}
.con{
    margin:2px;
}
/* 菜品区域样式 */
.dishes {
    width: 70%;
    display: flex;
    flex-direction: column;
    gap: 20px;
    height: 82vh; /* 占满视口高度 */

}

/* 分类卡片样式 */
.dishes-type {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 15px;
    height: 80px; /* 固定高度 */
    flex-shrink: 0; /* 防止被压缩 */
}
/* 菜品列表包装器 - 可滚动区域 */
.dishes-list-wrapper {
    flex: 1; /* 占据剩余空间 */

    overflow-y: auto; /* 垂直方向溢出时显示滚动条 */
    padding-right: 10px; /* 防止滚动条覆盖内容 */
}
/* 菜品列表样式 */
.dishes-list {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
    padding-bottom: 20px; /* 底部留出空间 */
}
.dish-card {
    width: 100%;
    height: 100px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 0px;
    box-sizing: border-box;
    margin-top: 20px;
}

.dish-info {
    width: 50px;
    height: 50px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    font-size: 16px;
}

.dish-control {
    display: flex;
    align-items: center;
    justify-content: space-around;
    width: 100%;
    height: 40px;
    padding: 0 10px;
    box-sizing: border-box;
}

.price {
    font-weight: 500;
    color: #45b7d1;
    font-size: 20px;
}
</style>